<%@ page import="com.y4oung.model.Business" %>
<%@ page import="com.y4oung.model.User" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>restaurantInfo</title>
<meta charset="utf-8">
<meta name = "format-detection" content = "telephone=no" />
    <link rel="stylesheet" href="../layui/css/layui.css">
<!--search css-->
<link rel="stylesheet" type="text/css" href="../css/search/normalize.css" />
<link rel="stylesheet" href="../css/search/font-awesome.min.css">
<link rel="stylesheet" href="../css/search/style3.css">

<link rel="icon" href="../images/favicon.ico">
<link rel="shortcut icon" href="../images/favicon.ico" />
<link rel="stylesheet" href="../css/form.css">
<link rel="stylesheet" href="../css/stuck.css">
<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="../css/touchTouch.css">
<!--star-->
<link rel="stylesheet" href="../css/star.css" />


<style type="text/css">
  .emoji1{color: #f62459}
  .emoji2{color: #e4664f}
  .emoji3{color: #70458c}
  .emoji4{color: #2c3e50}
  .emoji5{color: #cf000f}
</style>

<!--restaurant star-->
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="../js/starScore.js"></script>

<script src="../js/jquery.js"></script>
<script src="../js/jquery-migrate-1.1.1.js"></script>
<script src="../js/script.js"></script>
<script src="../js/superfish.js"></script>
<script src="../js/jquery.equalheights.js"></script>
<script src="../js/jquery.mobilemenu.js"></script>
<script src="../js/jquery.easing.1.3.js"></script>
<script src="../js/tmStickUp.js"></script>
<script src="../js/jquery.ui.totop.js"></script>
<script src="../js/touchTouch.jquery.js"></script>
<script src="../js/TMForm.js"></script>
<script src="../js/modal.js"></script>

<script>

 $(document).ready(function(){

  $().UItoTop({ easingType: 'easeOutQuart' });
  $('#stuck_container').tmStickUp({});
  $('.gallery .gall_item').touchTouch();

  }); 
</script>

<!--restaurant review-->

<link rel="icon" type="image/png" sizes="16x16" href="../assets/images/favicon.png">
<title>Admin Press Admin Template - The Ultimate Bootstrap 4 Admin Template</title>
    <!-- Bootstrap Core CSS -->
    <%--<link href="../assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">--%>
    <!-- chartist CSS -->
    <link href="../assets/plugins/chartist-js/dist/chartist.min.css" rel="stylesheet">
    <link href="../assets/plugins/chartist-js/dist/chartist-init.css" rel="stylesheet">
    <link href="../assets/plugins/chartist-plugin-tooltip-master/dist/chartist-plugin-tooltip.css" rel="stylesheet">
   
   <%----%>


<%--<!--search css-->--%>
<%--<link rel="stylesheet" type="text/css" href="horizontal/css/search/normalize.css" />--%>
<%--<link rel="stylesheet" href="horizontal/css/search/font-awesome.min.css">--%>
<%--<link rel="stylesheet" href="horizontal/css/search/style3.css">--%>

<%--<link rel="icon" href="horizontal/images/favicon.ico">--%>
<%--<link rel="shortcut icon" href="horizontal/images/favicon.ico" />--%>
<%--<link rel="stylesheet" href="horizontal/css/form.css">--%>
<%--<link rel="stylesheet" href="horizontal/css/stuck.css">--%>
<%--<link rel="stylesheet" href="horizontal/css/style.css">--%>


<%--<script>--%>
 <%--$(document).ready(function(){--%>
  <%--$().UItoTop({ easingType: 'easeOutQuart' });--%>
  <%--$('#stuck_container').tmStickUp({});--%>
  <%--}); --%>
<%--</script>--%>

<!-- jpage -->
<script src="../js/jquery-1.11.1.min.js"></script>
<style type="text/css">
.listu{margin-left: 0;padding-left: 0px; overflow:hidden;height: 1000px;width:720px;}
.fydiv{width: 720px;height: 50px;margin: 0 auto;margin-top: 0px;}
.fenye{text-align: center;height: 30px;margin: 0 auto;}
.fenye li{float: left;border:1px solid #adacac;height: 26px;line-height: 26px;margin-right: 10px;}
.fenye li:hover{background-color: #f1f1f1;}
.fenye li a{text-decoration: none;color:#adacac; display: block; }
.prev{width: 66px;}
.next{width: 66px;}
.numb{width: 26px;}
.choose{border:1px solid #000!important;}
.choose a{color: #000!important;}
</style>

</head>

<body class="page1" id="top">
<div  id="stuck_container" class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo"><a href="/j2ee/user/home" style="color: #009688;">Yummy</a></div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="/j2ee/user/showGallery.do">Gallery</a></li>
            <li class="layui-nav-item"><a href="">Reservation</a></li>
            <li class="layui-nav-item"><a href="/j2ee/user/showContact.do">Contacts</a></li>
            <%--<li class="layui-nav-item">--%>
            <%--<a href="javascript:;">其它</a>--%>
            <%--<dl class="layui-nav-child">--%>
            <%--<dd><a href="">邮件管理</a></dd>--%>
            <%--<dd><a href="">消息管理</a></dd>--%>
            <%--<dd><a href="">授权管理</a></dd>--%>
            <%--</dl>--%>

            <%--</li>--%>

            <li class="layui-nav-item" style="margin-left: 20px"><input placeholder="搜索餐厅、菜名等" value="" class="layui-input" type="text" style="height: 30px;padding-left: 12px;background-color: #424652;background-color: rgba(255,255,255,.05);border: none 0;color: #fff;font-size: 12px"></li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <%if(request.getSession().getAttribute("user")==null){ %>
            <li class="layui-nav-item"><a href="/j2ee/user/toLogin.do">Log in</a></li>
            <%}else{ %>
            <li class="layui-nav-item">
                <% User u = (User)request.getSession().getAttribute("user"); %>
                <a href="javascript:;">
                    <img src="<%=u.getIcon() %>" class="layui-nav-img">
                    <%out.print(u.getName()); %>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="/j2ee/user/showUser.do">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="/j2ee/user/logout.do">Logout</a></li>
            <%} %>
        </ul>
    </div>
</div>
<!--==============================
              header
=================================-->
<header>
<!--==============================
            Stuck menu
=================================-->
<section id="stuck_container">
    <div class="container">
      <div class="row">
        <div class="grid_12">
        <h1>
          <a href="index.html">
            <img style="margin-bottom:10px;" src="../images/logo1.png" alt="Logo alt">
          </a>
        </h1>  
          <div class="navigation">
            <nav>
                <div style="margin-left: 13px;"class="search d1">
                    <form>
                      <input type="text" placeholder="Search……">
                      <button type="submit"></button>
										</form>
                    </div>
            </nav>
            <div class="clear"></div>
          </div>
        </div>
      </div>
    </div>
  </section> 
</header>      
<!--=====================
          Content
======================-->
<% Business b = (Business)request.getAttribute("business"); %>
<section class="content"><div class="ic">More Website Templates @ TemplateMonster.com - July 30, 2014!</div>
  <div class="container">
    <div class="row">
        <input id="res_id" value="<%out.print(b.getId());%>" type="hidden">
      <div class="grid_8">
        <h2 style="font-size:35px;font-weight:550;color:rgb(77, 77, 77);">Restaurant Information</h2>
        <img src="<%=b.getImage()%>" onerror="javascript:this.src='../images/img_1.jpg' " alt="" class="img_inner fleft inn__1">
        <div class="extra_wrapper">
          <div style="color:black;font-weight:500;margin-top:10px;font-size:30px;height:30px"><%out.print(b.getName());%>
                <div class="htmleaf-content">
                  <div id="like" class="emoji3" style="margin-top:-20px;margin-left:300px;" title="收藏"></div>
                </div>      
          </div>
          <ul style="margin-top:70px;" class="show_number clearfix">								
            <li>
                <div class="atar_Show">
                  <p tip="<%=b.getStars()%>"></p>
                </div>
                <span></span>
            </li>					
         </ul>
         <div style="margin-top:5px;font-size:15px;font-weight:400;color:black;">Taste：<%=b.getTasteStars()%> &nbsp; Environment：<%=b.getEnvironStars()%> &nbsp; Service：<%=b.getServiceStars()%> </div>
         <div style="font-size:15px;font-weight:400;color:black;"><font color="blue">Per consumption</font>：$<%=b.getP_p_p()%></div>
         <div style="font-size:15px;font-weight:400;color:black;"><font color="blue">Open Hours</font>：Monday-Sunday <%=b.getStart()%>-<%=b.getEnd()%></div>
         <div style="font-size:15px;font-weight:400;color:black;"><font color="blue">Introduction：</font><%out.print(b.getIntro()); %></div>
         <input style="font-size:20px;margin-top:30px;width:120px;border:0;background-color:#e4664f;color:white;" type="button" value="Review" onclick="window.open('/j2ee/user/showReview.do')">
       </div>
        <div class="clear"></div>
      </div>
      <div class="grid_4">
        <h2 style="font-size:35px;font-weight:550;color:rgb(77, 77, 77);">Find Us</h2>
        <div class="map" style="height:170px">
          <div class="row">
            <div class="grid_9">
              <figure class="">
                <iframe src="https://ditu.amap.com/"  style="border:0"></iframe>
              </figure>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="grid_2">
              <div class="map_block">
                <div class="map_title">Address:</div>
                <%=b.getAddress()%>
              </div>
          </div>
          <div class="grid_2">
                <div class="map_block">
                <div class="map_title">Phones:</div>
                <%=b.getPhone()%>
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="content"><div class="ic">More Website Templates @ TemplateMonster.com - July 30, 2014!</div>
  <div class="container">
    <div class="row">
      <div class="grid_4">
        <h2 style="font-size:35px;font-weight:550;color:rgb(77, 77, 77);">Says</h2>
        <blockquote style="border:0;" class="bq1">
          <img src="../images/page1_img7.jpg" alt="" class="img_inner fleft noresize">
          <div class="extra_wrapper">
            <div class="bq_title color1">Mark Wood</div>
            Sivamus at magna non nuncer tristique rhoncus. Aliquame nibh ante, egestas id dictumertolom  commodo. Praesent faucib mal.
            
          </div>
        </blockquote>
      </div>
      <div class="grid_4">
        <h2 style="font-size:35px;font-weight:550;color:rgb(77, 77, 77);">Daily Special</h2>
        <div class="block2">
          <time datetime="2014-01-01">11<br>June</time>
          <div class="extra_wrapper">
            <div class="text1"><a href="#">Vivamus at magna non nunc </a></div>Rehoncus. Aliquam nibh antegestas id dictum a, commodo. Praesenterto faucibus malesuada faucibus
          </div>
        </div>
        <div class="block2">
          <time datetime="2014-01-01">15<br>APR</time>
          <div class="extra_wrapper">
            <div class="text1"><a href="#">Tivamus at magna non nunc </a></div>Rehoncus. Aliquam nibh antegestas id dictum a, commodo. Praesenterto faucibus malesuada faucibu
          </div>
        </div>
      </div>
      <div class="grid_4">
          <h2 style="font-size:35px;font-weight:550;color:rgb(77, 77, 77);">Promotion</h2>
          <ul class="shed">
            <li>One Voucher<font size="3"><br>$98 &nbsp;&nbsp;<font style="text-decoration:line-through;">$100</font></font></li>
            <li>2-3 Package<font size="3"><br>$120 &nbsp;&nbsp;<font style="text-decoration:line-through;">$160</font></font></li>
            <li>4-5 Package<font size="3"><br>$240 &nbsp;&nbsp;<font style="text-decoration:line-through;">$350</font></font></li>
          </ul>
         
      </div>
    </div>
  </div>
  </section>
<section class="content"><div class="ic">More Website Templates @ TemplateMonster.com - July 30, 2014!</div>
<div class="container">
<div class="row">
<div class="grid_8">
  <div class="row" style="margin-left:-15px;">
    <div class="col-lg-10">
      <div class="card" style="padding:20px;margin-top:20px;">
        <div  class="card-body">
          <h4 style="margin-bottom:20px;font-size:35px;font-weight:550;color:rgb(77, 77, 77);" class="card-title">Recent Comments</h4>
        </div>
        <!-- Comment widgets -->
        <div class="comment-widgets m-b-20">
          <!--分页内容-->
          <ul class="listu"></ul>
          <!--分页页码-->
          <div style="margin-left:450px;"class="fydiv">
            <ul class="fenye"></ul>
          </div>
          <script type="text/javascript">
          getPage(1);
//翻页
function getPage(pn){
  var dataCount=10;//总数据条数
  var pageSize=4;//每页显示条数
  var pageCount= Math.ceil(dataCount / pageSize);//总页数
  if(pn==0||pn>pageCount){
    return;
  }
  var ul=$(".listu");
  ul.empty();
  //console.log(pageCount+"..."+pn)
  paintPage(pageCount,pn);   //绘制页码
  var startPage = pageSize * (pn - 1);

  var names=["James Anderson","Michael Jorden","Johnathan Doeting","James Anderson"];
  var dates=["April 14, 2016","April 14, 2016","April 14, 2016","April 14, 2016"];
  var states=["label-info","label-success","label-danger","label-info"];
  var reviews=["Pending","Approved","Rejected","Pending"];
  var note="Lorem Ipsum is simply dummy text of the printing and type setting industry. Lorem Ipsum has beenorem Ipsum is simply dummy text of the printing and type setting industry.";
  var tip="Taste：5 Environment：4 Service：4";

    if (pageCount == 1) {     // 当只有一页时 
    for (var j = 0; j < dataCount; j++) {  
        var x=j%4+1;
        var active = "Approved";
        if(reviews[x-1]==active){
          var e="<div class=\"d-flex flex-row comment-row\" style=\"height:250px\"><div class=\"p-2\"><span class=\"round\" style=\"margin-left:20px\"><img src=\"../assets/images/users/"+x+".jpg\" alt=\"user\" width=\"50\"></span></div><div class=\"comment-text w-100\" style=\"width:650px;height:200px;margin-top:-60px;margin-left:80px;\"><h5 style=\"font-size:20px;\">"+names[x-1]+"</h5><ul style=\"margin-top:5px;\" class=\"show_number clearfix\"><li><div class=\"atar_Show\"><p tip=\"5\"></p></div></li></ul><div style=\"margin-top:-20px;margin-left:160px;\" class=\"comment-footer\"><span class=\"date\">"+dates[x-1]+"</span>&nbsp;<span class=\"label "+states[x-1]+"\">"+reviews[x-1]+"</span></div><div style=\"margin-top:5px;margin-left:5px;\" class=\"comment-footer\"><span class=\"date\">"+tip+"<span class=\"action-icons active\"><a href=\"javascript:void(0)\"><i class=\"mdi mdi-pencil-circle\"></i></a><a href=\"javascript:void(0)\"><i class=\"mdi mdi-checkbox-marked-circle\"></i></a><a href=\"javascript:void(0)\"><i class=\"mdi mdi-heart\"></i></a></span></div><p class=\"m-b-5 m-t-10\" style=\"max-height:150px\">"+note+"</p><div style=\"width:135px;height:35px;margin-left:2px;float:left\" class=\"col-lg-3 col-md-6 m-b-20\"><img class=\"img-responsive radius\" src=\"assets/images/big/img1.jpg\"></div><div style=\"width:135px;height:35px;margin-left:20px;float:left;\" class=\"col-lg-3 col-md-6 m-b-20\"><img class=\"img-responsive radius\" src=\"../assets/images/big/img3.jpg\"></div></div></div></div>";
          ul.append(e);  
        }else{
          var e="<div class=\"d-flex flex-row comment-row\" style=\"height:250px\"><div class=\"p-2\"><span class=\"round\" style=\"margin-left:20px\"><img src=\"../assets/images/users/"+x+".jpg\" alt=\"user\" width=\"50\"></span></div><div class=\"comment-text w-100\" style=\"width:650px;height:200px;margin-top:-60px;margin-left:80px;\"><h5 style=\"font-size:20px;\">"+names[x-1]+"</h5><ul style=\"margin-top:5px;\" class=\"show_number clearfix\"><li><div class=\"atar_Show\"><p tip=\"5\"></p></div></li></ul><div style=\"margin-top:-20px;margin-left:160px;\" class=\"comment-footer\"><span class=\"date\">"+dates[x-1]+"</span>&nbsp;<span class=\"label "+states[x-1]+"\">"+reviews[x-1]+"</span></div><div style=\"margin-top:5px;margin-left:5px;\" class=\"comment-footer\"><span class=\"date\">"+tip+"<span class=\"action-icons active\"><a href=\"javascript:void(0)\"><i class=\"mdi mdi-pencil-circle\"></i></a><a href=\"javascript:void(0)\"><i class=\"mdi mdi-checkbox-marked-circle\"></i></a><a href=\"javascript:void(0)\"><i class=\"mdi mdi-heart\"></i></a></span></div><p class=\"m-b-5 m-t-10\" style=\"max-height:150px\">"+note+"</p><div style=\"width:135px;height:35px;margin-left:2px;float:left\" class=\"col-lg-3 col-md-6 m-b-20\"><img class=\"img-responsive radius\" src=\"assets/images/big/img1.jpg\"></div><div style=\"width:135px;height:35px;margin-left:20px;float:left;\" class=\"col-lg-3 col-md-6 m-b-20\"><img class=\"img-responsive radius\" src=\"../assets/images/big/img3.jpg\"></div></div></div></div>";
          ul.append(e);   
        } 
    }
  }else {      // 当超过一页时 
    var e=""; 
    var endPage = pn<pageCount?pageSize * pn:dataCount;
    for (var j = startPage; j < endPage; j++) {  
        var x=j%4+1;
      var active = "Approved";
        if(reviews[x-1]==active){
          var e="<div class=\"d-flex flex-row comment-row\" style=\"height:250px\"><div class=\"p-2\"><span class=\"round\" style=\"margin-left:20px\"><img src=\"../assets/images/users/"+x+".jpg\" alt=\"user\" width=\"50\"></span></div><div class=\"comment-text w-100\" style=\"width:650px;height:200px;margin-top:-60px;margin-left:80px;\"><h5 style=\"font-size:20px;\">"+names[x-1]+"</h5><ul style=\"margin-top:5px;\" class=\"show_number clearfix\"><li><div class=\"atar_Show\"><p tip=\"5\"></p></div></li></ul><div style=\"margin-top:-20px;margin-left:160px;\" class=\"comment-footer\"><span class=\"date\">"+dates[x-1]+"</span>&nbsp;<span class=\"label "+states[x-1]+"\">"+reviews[x-1]+"</span></div><div style=\"margin-top:5px;margin-left:5px;\" class=\"comment-footer\"><span class=\"date\">"+tip+"<span class=\"action-icons active\"><a href=\"javascript:void(0)\"><i class=\"mdi mdi-pencil-circle\"></i></a><a href=\"javascript:void(0)\"><i class=\"mdi mdi-checkbox-marked-circle\"></i></a><a href=\"javascript:void(0)\"><i class=\"mdi mdi-heart\"></i></a></span></div><p class=\"m-b-5 m-t-10\" style=\"max-height:150px\">"+note+"</p><div style=\"width:135px;height:35px;margin-left:2px;float:left\" class=\"col-lg-3 col-md-6 m-b-20\"><img class=\"img-responsive radius\" src=\"../assets/images/big/img1.jpg\"></div><div style=\"width:135px;height:35px;margin-left:20px;float:left;\" class=\"col-lg-3 col-md-6 m-b-20\"><img class=\"img-responsive radius\" src=\"../assets/images/big/img3.jpg\"></div></div></div></div>";
          ul.append(e);  
        }else{
          var e="<div class=\"d-flex flex-row comment-row\" style=\"height:250px\"><div class=\"p-2\"><span class=\"round\" style=\"margin-left:20px\"><img src=\"../assets/images/users/"+x+".jpg\" alt=\"user\" width=\"50\"></span></div><div class=\"comment-text w-100\" style=\"width:650px;height:200px;margin-top:-60px;margin-left:80px;\"><h5 style=\"font-size:20px;\">"+names[x-1]+"</h5><ul style=\"margin-top:5px;\" class=\"show_number clearfix\"><li><div class=\"atar_Show\"><p tip=\"5\"></p></div></li></ul><div style=\"margin-top:-20px;margin-left:160px;\" class=\"comment-footer\"><span class=\"date\">"+dates[x-1]+"</span>&nbsp;<span class=\"label "+states[x-1]+"\">"+reviews[x-1]+"</span></div><div style=\"margin-top:5px;margin-left:5px;\" class=\"comment-footer\"><span class=\"date\">"+tip+"<span class=\"action-icons active\"><a href=\"javascript:void(0)\"><i class=\"mdi mdi-pencil-circle\"></i></a><a href=\"javascript:void(0)\"><i class=\"mdi mdi-checkbox-marked-circle\"></i></a><a href=\"javascript:void(0)\"><i class=\"mdi mdi-heart\"></i></a></span></div><p class=\"m-b-5 m-t-10\" style=\"max-height:150px\">"+note+"</p><div style=\"width:135px;height:35px;margin-left:2px;float:left\" class=\"col-lg-3 col-md-6 m-b-20\"><img class=\"img-responsive radius\" src=\"../assets/images/big/img1.jpg\"></div><div style=\"width:135px;height:35px;margin-left:20px;float:left;\" class=\"col-lg-3 col-md-6 m-b-20\"><img class=\"img-responsive radius\" src=\"../assets/images/big/img3.jpg\"></div></div></div></div>";
          ul.append(e);   
        } 
    }
  }
}

//绘制页码
  function paintPage(number,currNum)  //number 总页数,currNum 当前页  
  {
    var pageUl=$(".fenye");
    pageUl.empty();
    var ulDetail="";

    if(number==1){
        ulDetail= "<li class=\"prev\"><a href=\"javascript:void(0)\">prev</a></li>"+
        "<li class=\"numb choose\"><a href=\"javascript:getPage(1)\">1</a></li>"+
        "<li class=\"next\"><a href=\"javascript:void(0)\">next</a></li>";
    }else if(number==2){
        ulDetail= "<li class=\"prev\"><a href=\"javascript:getPage(1)\">prev</a></li>"+
        "<li class=\"numb"+choosele(currNum,1)+"\"><a href=\"javascript:getPage(1)\">1</a></li>"+
        "<li class=\"numb"+choosele(currNum,2)+"\"><a href=\"javascript:getPage(2)\">2</a></li>"+
        "<li class=\"next\"><a href=\"javascript:getPage(2)\">next</a></li>";
    }else if(number==3){
        ulDetail= "<li class=\"prev\"><a href=\"javascript:getPage("+parseInt(currNum-1)+")\">prev</a></li>"+
        "<li class=\"numb"+choosele(currNum,1)+"\"><a href=\"javascript:getPage(1)\">1</a></li>"+
        "<li class=\"numb"+choosele(currNum,2)+"\"><a href=\"javascript:getPage(2)\">2</a></li>"+
        "<li class=\"numb"+choosele(currNum,3)+"\"><a href=\"javascript:getPage(3)\">3</a></li>"+
        "<li class=\"next\"><a href=\"javascript:getPage("+parseInt(currNum+1)+")\">next</a></li>";
    }else if(number==currNum&&currNum>3){
        ulDetail= "<li class=\"prev\"><a href=\"javascript:getPage("+parseInt(currNum-1)+")\">prev</a></li>"+
        "<li class=\"numb\"><a href=\"javascript:getPage("+parseInt(currNum-2)+")\">"+parseInt(currNum-2)+"</a></li>"+
        "<li class=\"numb\"><a href=\"javascript:getPage("+parseInt(currNum-1)+")\">"+parseInt(currNum-1)+"</a></li>"+
        "<li class=\"numb choose\"><a href=\"javascript:getPage("+currNum+")\">"+currNum+"</a></li>"+
        "<li class=\"next\"><a href=\"javascript:getPage("+currNum+")\">next</a></li>";
    }else if(currNum==1&&number>3){
        ulDetail= "<li class=\"prev\"><a href=\"javascript:void(0)\">prev</a></li>"+
        "<li class=\"numb choose\"><a href=\"javascript:void(0)\">1</a></li>"+
        "<li class=\"numb\"><a href=\"javascript:getPage(2)\">2</a></li>"+
        "<li class=\"numb\"><a href=\"javascript:getPage(3)\">3</a></li>"+
        "<li class=\"next\"><a href=\"javascript:getPage(2)\">next</a></li>";
    }else{
        ulDetail= "<li class=\"prev\"><a href=\"javascript:getPage("+parseInt(currNum-1)+")\">prev</a></li>"+
        "<li class=\"numb\"><a href=\"javascript:getPage("+parseInt(currNum-1)+")\">"+parseInt(currNum-1)+"</a></li>"+
        "<li class=\"numb choose\"><a href=\"javascript:getPage("+currNum+")\">"+currNum+"</a></li>"+
        "<li class=\"numb\"><a href=\"javascript:getPage("+parseInt(currNum+1)+")\">"+parseInt(currNum+1)+"</a></li>"+
        "<li class=\"next\"><a href=\"javascript:getPage("+parseInt(currNum+1)+")\">next</a></li>";
    }

    $(".fenye").append(ulDetail);

  }

  function choosele(num,cur){
    if(num==cur){
        return " choose";
    }else{
        return "";
    }
  }
</script>
</div>
</div>
</div>
</div>
<!-- Row --></div>
  <div class="grid_4">
      <h2 style="font-size:35px;font-weight:550;color:rgb(77, 77, 77);">Recommend dishes</h2>
      <div class="block3">
        <img src="../images/page4_img4.jpg" alt="" class="img_inner noresize fleft">
        <div class="extra_wrapper">
          <div class="text1 color1">              
            <font size="4" >Salad<br></font>
            <font color="orange">$10 </font>
          </div>I like it so much. It's delicious and healthy. <a href="#" class="color1">[...]</a>
        </div>
      </div>
      <div class="block3">
        <img src="../images/page4_img5.jpg" alt="" class="img_inner noresize fleft">
        <div class="extra_wrapper">
          <div class="text1 color1">
            <font size="4" >Steak<br></font>
            <font color="orange">$50 </font>
          </div>I like it so much. It's delicious and healthy. <a href="#" class="color1">[...]</a>
        </div>
      </div>
      <div class="block3">
        <img src="../images/page4_img6.jpg" alt="" class="img_inner noresize fleft">
        <div class="extra_wrapper">
          <div class="text1 color1">
            <font size="4" >Hamburger<br></font>
            <font color="orange">$25 </font>
          </div>I like it so much. It's delicious and healthy. <a href="#" class="color1">[...]</a>
        </div>
      </div>
      <a style="margin-left:300px;margin-top:30px;font-size:20px;font-weight:450;color:rgb(255, 123, 0);">more</a>
      <h2 style="font-size:35px;font-weight:550;color:rgb(77, 77, 77);">What's your like</h2>
      <div class="block3">
        <img src="../images/page4_img4.jpg" alt="" class="img_inner noresize fleft">
        <div class="extra_wrapper">
          <div class="text1 color1">              
            <div style="margin-top:5px;font-size:25px;">Subway<br><br></div>
            <ul style="height:5px;" class="show_number clearfix">								
              <li>
                  <div class="atar_Show">
                    <p tip="5"></p>
                  </div>
              </li>					
           </ul>
          </div>
          <font>GUO MAO<br></font>
          <font>Pre $30</font>
        </div>
      </div>
      <div class="block3">
        <img src="../images/page4_img5.jpg" alt="" class="img_inner noresize fleft">
        <div class="extra_wrapper">
          <div class="text1 color1">
            <div style="margin-top:5px;font-size:25px;">McDonald<br><br></div>
            <ul style="height:5px;" class="show_number clearfix">								
              <li>
                  <div class="atar_Show">
                    <p tip="5"></p>
                  </div>
              </li>					
           </ul>
          </div>
          <font>GUO MAO<br></font>
          <font>Pre $30</font></div>
      </div>
      <div class="block3">
        <img src="../images/page4_img6.jpg" alt="" class="img_inner noresize fleft">
        <div class="extra_wrapper">
          <div class="text1 color1">
            <div style="margin-top:5px;font-size:25px;">KFC<br><br></div>
            <ul style="height:5px;" class="show_number clearfix">								
              <li>
                  <div class="atar_Show">
                    <p tip="5"></p>
                  </div>
              </li>					
           </ul>
          </div>
          <font>GUO MAO<br></font>
          <font>Pre $30</font></div>
      </div>
      </div>
      </div>
      </div>
      </section>
<!--==============================
              Write Review
=================================-->
<div style="margin-top:-50px;" class="form_block">
<div class="container">
    <div class="row">
      <div class="grid_10">
        <h2 style="font-size:35px;font-weight:550;color:rgb(77, 77, 77);">Write Review</h2>
        <form id="form" >
          <div class="htmleaf-content">
            <div id="element3" class="emoji5" style="margin-top:-20px;"></div>
          </div>          
        <div class="response-error-message"></div>
        <label class="message">            
        <textarea id="content" name="message" style="height:150px;margin-top:20px;width:770px;" placeholder="Write something……" data-constraints='@Required @Length(min=20,max=999999)'></textarea>
        <span class="empty-message">*This field is required.</span>
        <span class="error-message">*The message is too short.</span>
        </label>
        </form>   
      </div>      
    </div>  
    <div class="htmleaf-content">
      <div style="margin-top:20px;">Taste：</div>
      <div id="element2" class="emoji5" style="margin-top:-20px;margin-left:100px;"></div>
    </div>
    <div class="htmleaf-content">
        <div style="margin-top:20px;">Service：</div>
        <div id="element4" class="emoji5" style="margin-top:-20px;margin-left:100px;"></div>
      </div>    
      <div class="htmleaf-content">
          <div style="margin-top:20px;">Environment：</div>
          <div id="element1" class="emoji5" style="margin-top:-20px;margin-left:100px;"></div>
        </div>
    <input id="review_btn" style="font-size:20px;margin-top:40px;width:120px;border:0;background-color:#e4664f;color:white;" type="button" value="Send">
  </div>
</div>
<!--==============================
              footer
=================================-->
<footer style="background:rgb(165, 165, 165)" id="footer">
  <div class="container">
    <div class="row">
      <div class="grid_12">  
        <div class="socials">
          <a href="#" class="fa fa-twitter"></a>
          <a href="#" class="fa fa-facebook"></a>
          <a href="#" class="fa fa-google-plus"></a>
          <a href="#" class="fa fa-pinterest"></a>
        </div>
        <div class="copyright"><span class="brand">Bliss </span> &copy; <span id="copyright-year"></span> | <a href="#">Privacy Policy</a> <div>More Templates <a href="http://www.cssmoban.com/" target="_blank" title="Yummy">Yummy</a> - Collect from <a href="http://www.cssmoban.com/" title="Yummy" target="_blank">Yummy</a></div>
        </div>
      </div>
    </div>
  </div> 
</footer> 
<script src="../js/star.js"></script>
<script src="../js/jquery-2.1.1.min.js"></script>
<script src="../js/jquery.emojiRatings.js"></script>
<script src="../js/yummy/yummy_review.js"></script>
<script type="text/javascript" src="../layui/layui.js"></script>
<script src="../js/layer/layer.js"></script>
<script>
    layui.use('element', function(){
        var element = layui.element;

    });

      $(function() {
        $("#element3").emojiRating({
            emoji: 'U+2764',
            fontSize: 35,
            count: 5,
            inputName : 'rating3'
            });
         });
  $(function() {
    $("#element2").emojiRating({
        emoji: 'U+2B50',
        fontSize: 35,
        count: 5,
        inputName : 'rating2'
        });
     });
    $(function() {
      $("#element4").emojiRating({
          emoji: 'U+2B50',
          fontSize: 35,
          count: 5,
          inputName : 'rating4'
          });
       });
$(function() {
  $("#element1").emojiRating({
      emoji: 'U+2B50',
      fontSize: 35,
      count: 5,
      inputName : 'rating1'
      });
   });
      $(function() {
        $("#like").emojiRating({
            emoji: 'U+1F604',
            fontSize: 35,
            count: 1
             });
          });
</script>
</body>
</html>